<template>
  <a-select show-search :mode="mode" :placeholder="placeholder" :labelInValue="mode === 'default' ? true : false" :value="value" :filter-option="false" @search="onSearch" @change="onChange" :disabled="disabled">
    <a-select-option :key="item.userId" :value="item.userCode" v-for="item in options">
      <template v-if="showCode">{{ item.userName }}-{{ item.userCode }}</template>
      <template v-else>{{ item.userName }}</template>
    </a-select-option>
  </a-select>
</template>

<script>
export default {
  name: 'UserSelect',
  props: {
    value: {
      type: [Object, Array],
      default: () => undefined
    },
    mode: {
      type: String,
      default: 'default'
    },
    placeholder: {
      type: String,
      default: '请选择区域担当'
    },
    showCode: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  data () {
    return {
      options: []
    }
  },
  created () {
    this.onLoad()
  },
  methods: {
    onLoad (userName = '') {
      /*       this.$http.get('/system/user/optionSelect', {
              params: {
                userName,
                status: 1
              }
            }).then(res => {
              this.options = res.data
            }) */
    },
    onSearch (value) {
      if (value === '') return false
      this.onLoad(value)
    },
    onChange (val, e) {
      if (this.mode === 'default') {
        this.$emit('change', { label: val.label, id: val.key, code: e.data.key })
      } else {
        this.$emit('change', val)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
